<template>
    <div class="declareContainer">
        <div class="descriptionBox">
            <div v-html="declareData.description" class="declare"></div>
            <div class="rightHero">
                <img :src="declareData.pic" alt="Hero"/>
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps(['declareData'])
</script>

<style scoped>
.declareContainer {
    padding: 50px 3%;
}

.descriptionBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:deep(.declare) {
    width: 60%;
}

:deep(.declare h1) {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 24px;
    text-transform: uppercase;
    text-align: center;
}

:deep(.declare p) {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.rightHero {
    width: 30%;
}

.rightHero img {
    width: 100%;
}
</style>